@import "variables";

feed-detail {
  .article {
    img {
      padding: 0px;
    }
    img,
    video {
      width: 100%;
      display: block;
      max-width: 100%;
      //margin: pxTorem(15px) 0px;
    }
  }
  .article-template {
    padding: 0 pxTorem(30) pxTorem(70) pxTorem(30);
    background-color: #fff;
  }
  header {
    position: relative;
    padding: pxTorem(40) 0 pxTorem(20);
  }
  seed-avatar {
    width: pxTorem(80);
    height: pxTorem(80);

  }
  seed-img {
    width: 100%;
    height: auto;
    text-align: center;
    img {
      height: auto;
    }
  }
  #seed-lazyload-avatar {
    width: pxTorem(80);
    height: pxTorem(80);
  }

  #video-box {
    margin: pxTorem(15px) 0px;
  }
  .poster-name {
    @include font-dpr(28px);
    color: color($h5, c4);
    .nick-name {
      max-width: 100%;
    }
  }
  .circle-name {
    max-width: 100%;
    font-size: pxTorem(24);
    color: color($h5, c13);
    margin-top: pxTorem(10);
  }
  .button-subscription {
    width: pxTorem(115px);
    height: pxTorem(52px);
    background: url(#{$images-path}/subscript_icon_unfollow.png) no-repeat center right/contain;
    &.isFollow {
      background: url(#{$images-path}/subscript_icon_isfollow.png) no-repeat center right/contain;
    }
  }
  .article-title {
    margin-bottom: pxTorem(26);
    h3 {
      font-weight: bold;
      @include font-dpr(44px);
      color: color($h5, c2);
      margin: pxTorem(15px) 0px;
    }
    .source {
      @include font-dpr(24px);
      color: color($h5, c4);
      display: flex;
      align-items: center;
      .separator {
        height: 100%;
        display: inline-block;
        @include mix-dpr(width, 2);
        @include mix-dpr(height, 24);
        margin: 0px pxTorem(20px);
        background: color($h5, c8);
      }
      .tags {
        margin-right: pxTorem(5px);
      }
    }
    .icon-box {
      width: pxTorem(120px);
      height: pxTorem(120px);
      display: inline-block;
      margin: pxTorem(10px) 0px;

    }

  }
  .section {
    margin-top: pxTorem(15);
    p{
      line-height: pxTorem(40);
      color: color($h5, c2);
      @include font-dpr(28px);
    }
  }
  .thumb-up-box {
    margin-top: pxTorem(50);
    text-align: center;
    .thumb-icon {
      margin-bottom: pxTorem(16);
      @include icon(120, 120, '#{$icons-path}/icon_unsupport.png');
      &.thumb-uped {
        background-image: url(#{$icons-path}/icon_support.png);
      }
    }
    .quantity-number {
      color: color($h5, c3);
      @include font-dpr(28px);
    }
    .avatar-list {
      display: flex;
      justify-content: center;
      margin-top: pxTorem(36);
      seed-avatar {
        margin-right: 0;
        margin-left: pxTorem(-24);
        border: 2px solid #fff;
      }
    }
  }
}


